<template>
  <div>
    <div class="my-body">
      <div class="my-font my-phone">手机号码： {{ number }}</div>
      <el-link :underline="false" type="primary" icon="el-icon-edit">
        <span v-if="!banding" @click="updatePhoneNumber">修改</span>
        <span v-if="banding" @click="bingPhoneNumber">绑定</span>
      </el-link>
    </div>

    <!-- 绑定手机号码 -->
    <BindPhoneNumberDialog
      ref="BindPhoneNumberDialog"
      @getPhoneNumberByUserId="getPhoneNumberByUserId"
    ></BindPhoneNumberDialog>

    <!-- 更新手机号码 -->
    <ForgotPassword ref="UpdatePhoneNumber" :isUpdate="true"></ForgotPassword>
  </div>
</template>

<script>
import BindPhoneNumberDialog from "./BindPhoneNumberDialog.vue";
import ForgotPassword from "../updatepassword/ForgotPassword.vue";

export default {
  created() {
    this.getPhoneNumberByUserId();
  },
  components: { BindPhoneNumberDialog, ForgotPassword },
  data() {
    return {
      phoneNumber: "",
      banding: true, //绑定true，更新false
    };
  },
  methods: {
    //获取模糊手机号
    getPhoneNumberByUserId() {
      this.$request.getHttp({
        url: "/user/getPhoneNumberByUserId",
        params: {
          userId: localStorage.getItem("userId"),
        },
        success: (data) => {
          if (data.code == 200) {
            this.phoneNumber = data.phoneNumber;
          }
        },
        error: (error) => {},
      });
    },
    //绑定手机号
    bingPhoneNumber() {
      this.$refs.BindPhoneNumberDialog.showBindPhoneDialog();
    },
    //更新手机号
    updatePhoneNumber() {
      this.$refs.UpdatePhoneNumber.showForgetPasswordDialog();
    },
  },
  computed: {
    number() {
      if (!this.phoneNumber) {
        this.banding = true;
        return "未绑定";
      }
      this.banding = false;
      return this.phoneNumber;
    },
  },
};
</script>

<style scoped>
.my-body {
  display: flex;
  align-items: center;
  margin-top: 5%;
}
.my-phone {
  margin-right: 10px;
}

.my-font {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}
</style>